<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 博客演示</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/iconfont.css" rel="stylesheet">
</head>
<body>

    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg bg-light shadow-sm border-bottom">
        <div class="mycontainer container">
            <a class="navbar-brand" href="index">Hello石狐</a>
<!--            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">-->
<!--                <span class="navbar-toggler-icon"></span>-->
<!--            </button>-->
<!--            <div class="collapse navbar-collapse" id="navbarNav">-->
<!--                <ul class="navbar-nav">-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="index">首页</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link active" href="articles">博客</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="addArticle">发布文章</a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--                <ul class="navbar-nav ms-auto">-->
<!--                    <li class="nav-item dropdown">-->
<!--                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">-->
<!--                            <span>用户名</span>-->
<!--                        </a>-->
<!--                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">-->
<!--                            <li><a class="dropdown-item" href="#">个人资料</a></li>-->
<!--                            <li><hr class="dropdown-divider"></li>-->
<!--                            <li><a class="dropdown-item" href="/auth/logout">退出登录</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
        </div>
    </nav>

    <!-- 英雄区域 -->
    <header class="bg-light py-5">
        <div class="container text-center">
                <h1 class="display-4">欢迎来到我的博客</h1>
                <p class="lead">使用Bootstrap构建的响应式博客网站</p>
                <a href="edit-article.html" class="btn btn-primary btn-lg mt-3">开始写作</a>
            </div>
    </header>

    <!-- 主要内容 -->
    <main class="mycontainer container my-2">
        <div class="row">
            <!-- 博客文章 -->
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-body">

                        <div class="justify-content-start">
                            <i class="iconfont icon-shizhong"></i>
                            <span class="color-light">2021/01/17</span>
                            <span class="color-light">日常</span>
                        </div>
                        <h2 class="card-title">第一篇博客文章</h2>
                        <p class="card-text">这是一篇使用Bootstrap卡片组件展示的博客文章示例。Bootstrap提供了丰富的组件，可以快速构建美观的网页。</p>
                        <a>阅读全文</a>
                    </div>

                    <div class="card-footer text-muted">
                        <i class="iconfont icon-biaoqian"></i>
                        <a class="btn btn-sm btn-light">Java</a>
                        <a class="btn btn-sm btn-light">绘画</a>

                    </div>
                </div>
                <div class="card mb-4">
                    <div class="card-body">

                        <div class="justify-content-start">
                            <i class="iconfont icon-shizhong"></i>
                            <span class="color-light">2021/01/17</span>
                            <span class="color-light">日常</span>
                        </div>
                        <h2 class="card-title">第一篇博客文章</h2>
                        <p class="card-text">这是一篇使用Bootstrap卡片组件展示的博客文章示例。Bootstrap提供了丰富的组件，可以快速构建美观的网页。</p>
                        <a>阅读全文</a>
                    </div>

                    <div class="card-footer text-muted">
                        <i class="iconfont icon-biaoqian"></i>
                        <a class="btn btn-sm btn-light">Java</a>
                        <a class="btn btn-sm btn-light">绘画</a>

                    </div>
                </div>
                <div class="card mb-4">
                    <div class="card-body">

                        <div class="justify-content-start">
                            <i class="iconfont icon-shizhong"></i>
                            <span class="color-light">2021/01/17</span>
                            <span class="color-light">日常</span>
                        </div>
                        <h2 class="card-title">第一篇博客文章</h2>
                        <p class="card-text">这是一篇使用Bootstrap卡片组件展示的博客文章示例。Bootstrap提供了丰富的组件，可以快速构建美观的网页。</p>
                        <a>阅读全文</a>
                    </div>

                    <div class="card-footer text-muted">
                        <i class="iconfont icon-biaoqian"></i>
                        <a class="btn btn-sm btn-light">Java</a>
                        <a class="btn btn-sm btn-light">绘画</a>

                    </div>
                </div>
            </div>

            <!-- 侧边栏 -->
            <div class="col-md-3">
<!--                <div id="info" class="card mb-4">-->
<!--                    <div class="card-body">-->
<!--                        <div class="row justify-content-md-center">-->
<!--                            <div class="avatar">-->
<!--                                <img src="/image/yui.jpg" class="card-img" alt="头像">-->
<!--                            </div>-->
<!--                            &lt;!&ndash; 头像 &ndash;&gt;-->
<!--                        </div>-->
<!--                        <div class="row text-center">-->
<!--                            &lt;!&ndash; 姓名 &ndash;&gt;-->
<!--                            <h3 class="card-title">张三</h3>-->
<!--                            <p class="card-text">前端开发工程师</p>-->

<!--                            &lt;!&ndash; 座右铭 &ndash;&gt;-->
<!--                            <p class="card-text">-->
<!--                                <em>"行胜于言，实践出真知"</em>-->
<!--                            </p>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="card-footer">-->
<!--                        <div class="d-flex justify-content-center">-->
<!--                            <a href="mailto:someone@example.com" class="me-3" target="_blank">-->
<!--                                <i class="iconfont icon-email"></i>-->
<!--                            </a>-->
<!--                            <a href="https://gitee.com/yourusername" class="me-3" target="_blank">-->
<!--                                <i class="iconfont icon-gitee-gitee-fill"></i>-->
<!--                            </a>-->
<!--                            <a href="https://gitee.com/yourusername" class="me-3" target="_blank">-->
<!--                                <i class="iconfont icon-bilibili-line"></i>-->
<!--                            </a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->

                <div class="card mb-4">
                    <div class="card-header"><h5 class="iconfont icon-biaoqian">标签云</h5></div>
                    <div class="card-body">
                        <button type="button" class="btn btn-sm btn-info">Info</button>
                        <button type="button" class="btn btn-sm btn-light">Light</button>
                        <button type="button" class="btn btn-sm btn-dark">Dark</button>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header"><h5 class="iconfont icon-fenlei">最新文章</h5></div>
                    <ul class="list-group">
                        <li class="list-group-item">An item</li>
                        <li class="list-group-item">A second item</li>
                        <li class="list-group-item">A third item</li>
                        <li class="list-group-item">A fourth item</li>
                        <li class="list-group-item">And a fifth one</li>
                    </ul>
                </div>
            </div>

        </div>
    </main>

    <!-- 分页控件 -->
    <nav class="mb-2" aria-label="分页导航">
        <ul id="pagination" class="pagination justify-content-center">
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1"><i class="bi bi-chevron-left"></i> 上一页</a>
            </li>
            <li class="page-item active"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#">下一页 <i class="bi bi-chevron-right"></i></a>
            </li>
        </ul>
    </nav>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4">
        <div class="container text-center">
            <p>&copy; 2023 博客演示 - 使用Bootstrap构建</p>
        </div>
    </footer>

    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>